<template>
  <div class="userInfo">
    <el-tabs class="JNPF-el_tabs">
      <el-tab-pane label="账户信息">
        <el-col :span="12">
          <el-form :model="form" label-width="100px">
            <el-form-item label="账户">
              <el-input v-model="form.account" readonly />
            </el-form-item>
            <el-form-item label="所属组织">
              <el-input v-model="form.organize" readonly />
            </el-form-item>
            <el-form-item label="直属主管">
              <el-input v-model="form.manager" readonly />
            </el-form-item>
            <el-form-item label="岗位">
              <el-input v-model="form.position" readonly />
            </el-form-item>
            <el-form-item label="职级">
              <el-input v-model="form.ranks" readonly />
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="form.roleId" readonly />
            </el-form-item>
            <el-form-item label="注册时间">
              <el-input v-model="creatorTime" readonly />
            </el-form-item>
            <el-form-item label="上次登录">
              <el-input v-model="prevLogTime" readonly />
            </el-form-item>
            <el-form-item label="入职日期">
              <el-input v-model="entryDate" readonly />
            </el-form-item>
          </el-form>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="个人资料">
        <el-form ref="dataForm" :model="form2" :rules="form2Rule" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="form2.realName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-select v-model="form2.gender" placeholder="选择性别">
                  <el-option v-for="item in genderOptions" :key="item.enCode" :label="item.fullName"
                    :value="item.enCode" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族">
                <el-select v-model="form2.nation" placeholder="选择民族" filterable>
                  <el-option v-for="item in nationOptions" :key="item.id" :label="item.fullName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="籍贯">
                <el-input v-model="form2.nativePlace" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件类型">
                <el-select v-model="form2.certificatesType" placeholder="请选择类型" filterable>
                  <el-option v-for="item in certificatesTypeOptions" :key="item.id" :label="item.fullName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码">
                <el-input v-model="form2.certificatesNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文化程度">
                <el-select v-model="form2.education" placeholder="请选择学历" filterable>
                  <el-option v-for="item in educationOptions" :key="item.id" :label="item.fullName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生年月">
                <el-date-picker v-model="form2.birthday" type="date" placeholder="选择日期" value-format="timestamp"
                  format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="办公电话">
                <el-input v-model="form2.telePhone" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="办公座机">
                <el-input v-model="form2.landline" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号码">
                <el-input v-model="form2.mobilePhone" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮箱">
                <el-input v-model="form2.email" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急联系">
                <el-input v-model="form2.urgentContacts" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急电话">
                <el-input v-model="form2.urgentTelePhone" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="通讯地址">
                <el-input v-model="form2.postalAddress" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="自我介绍">
                <el-input v-model="form2.signature" type="textarea" :rows="3" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="dataFormSubmit()">保 存</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="个人签名">
        <el-row class="sign" :gutter="40">
          <div style="cursor : pointer">
            <el-col :span="6" class="sign-item">
              <div class='add-sign'>
                <el-dropdown trigger="click" @command="handleCommand">
                  <i class="add-icon el-icon-plus"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">在线签名</el-dropdown-item>
                    <el-dropdown-item>
                      <el-upload class="avatar-uploader" accept="image/*" :action="getAction" :headers="uploadHeaders"
                        :auto-upload="false" :show-file-list="false" :before-upload="beforeUpload"
                        :on-change="handleChange">
                        图片上传
                      </el-upload>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </div>
          <template v-for="(item,i) in signList">
            <el-col :span="6" class="sign-item" :key="i">
              <div :class="item.isDefault?'add-sign active':'add-sign'">
                <img :src="item.signImg" alt="" class="sign-img">
                <div class="icon-checked1" v-if="item.isDefault">
                  <i class=" el-icon-check"></i>
                </div>
                <div v-if="!item.isDefault" class="add-button">
                  <el-button @click="deleteSign(item.id)">删除</el-button>
                  <el-button type="primary" @click="updateDefault(item.id,item.signImg)">设为默认
                  </el-button>
                </div>
              </div>
            </el-col>
          </template>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import { UpdateUser, getSign, deleteSign, updateDefault } from '@/api/permission/userSetting'
  import { createSign } from '@/api/permission/userSetting'
  import { mapGetters } from "vuex";
  export default {
    props: {
      user: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        form: {},
        form2: {
          realName: '',
          signature: '',
          gender: 1,
          nation: '',
          nativePlace: '',
          certificatesType: '',
          certificatesNumber: '',
          education: '',
          birthday: null,
          telePhone: '',
          landline: '',
          mobilePhone: '',
          email: '',
          urgentContacts: '',
          urgentTelePhone: '',
          postalAddress: '',

        },
        form2Rule: {
          realName: [
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ]
        },
        certificatesTypeOptions: [],
        educationOptions: [],
        genderOptions: [],
        nationOptions: [],
        signVisible: false,
        signImg: '',
        signList: []
      }
    },
    computed: {
      getAction() {
        return this.define.comUploadUrl + '/annexpic'
      },
      uploadHeaders() {
        return { Authorization: this.$store.getters.token }
      },
      creatorTime() {
        return this.jnpf.toDate(this.form.creatorTime)
      },
      entryDate() {
        return this.jnpf.toDate(this.form.entryDate)
      },
      prevLogTime() {
        return this.jnpf.toDate(this.form.prevLogTime)
      },
      ...mapGetters(['userInfo'])
    },
    created() {
      // this.getOptions()
      // this.getInfo()
      // this.getSign()
    },
    methods: {
      beforeUpload(file) {
        let isAccept = new RegExp('image/*').test(file.type)
        if (!isAccept) return this.$message.error(`请上传图片`)
        this.getBase64WithFile(file).then(({ result: thumbUrl }) => {
          this.signImg = thumbUrl
          this.createSign()
        });
      },
      createSign() {
        let query = {
          signImg: this.signImg,
          isDefault: this.isDefault || 0
        }
        createSign(query).then(res => {
          if (this.isDefault == 0) {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1500
            })
            if (!this.userInfo.signImg) this.$store.commit('user/SET_USERINFO_SIGNIMG', this.signImg)
          }
          if (this.isDefault == 1) this.$store.commit('user/SET_USERINFO_SIGNIMG', this.signImg)
          this.getSign()
        }).catch(err => { this.getSign() })
      },
      handleChange(file) {
        if ((file.raw.size / 1024) > 500) return this.$message.error('操作失败，图片大小超出500K')
        this.beforeUpload(file.raw)
      },
      getBase64WithFile(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve({ result: reader.result, file });
          reader.onerror = error => reject(error);
        });
      },
      handleCommand(command) {
        if (command == '1') this.addSign()
      },
      closeDialog() {
        this.signVisible = false
        this.getSign()
      },
      getSign() {
        getSign().then(res => {
          this.signList = res.data || []
        })
      },
      deleteSign(id) {
        deleteSign(id).then(res => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500
          })
          this.getSign()
        })
      },
      updateDefault(id, signImg) {
        updateDefault(id).then(res => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500
          })
          this.$store.commit('user/SET_USERINFO_SIGNIMG', signImg)
          this.getSign()
        }).catch(err => {
          this.getSign()
        })
      },
      addSign() {
        this.signVisible = true
        this.$nextTick(() => {
          this.$refs.SignImg.init()
        })
      },
      getOptions() {
        this.$store.dispatch('base/getDictionaryData', { sort: 'Education' }).then((res) => {
          this.educationOptions = JSON.parse(JSON.stringify(res))
          this.$store.dispatch('base/getDictionaryData', { sort: 'certificateType' }).then((res) => {
            this.certificatesTypeOptions = JSON.parse(JSON.stringify(res))
          })
          this.$store.dispatch('base/getDictionaryData', { sort: 'sex' }).then(res => {
            this.genderOptions = JSON.parse(JSON.stringify(res))
          })
          this.$store.dispatch('base/getDictionaryData', { sort: 'Nation' }).then(res => {
            this.nationOptions = JSON.parse(JSON.stringify(res))
          })
        })
      },
      getInfo() {
        this.form = this.user
        for (let key of Object.keys(this.form2)) {
          this.form2[key] = this.form[key]
        }
      },
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) return
          UpdateUser(this.form2).then(res => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1500
            })
            this.$emit('updateInfo')
            this.$store.commit('user/SET_USERINFO_USERNAME', this.form2.realName)
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .userInfo {
    height: 100%;
    overflow: hidden;

    >>>.el-tabs__nav-scroll {
      padding-top: 0 !important;
    }
  }

  .sign {
    padding: 20px 50px 0px 50px;
  }

  .add-sign {
    position: relative;
    height: 160px;
    background-color: rgb(247, 247, 247);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    &.active {
      border: 1px solid #1890ff;
      box-shadow: 0 0 6px rgba(6, 58, 108, 0.26);
      color: #1890ff;

      .btn,
      .icon-checked {
        display: block;
      }
    }

    .add-button {
      position: absolute;
      display: none;
    }

    .add-icon {
      font-size: 50px;
      color: rgb(157, 158, 159);
    }

    .sign-img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }

  .add-sign:hover .add-button {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: rgba(157, 158, 159, 0.8);

    justify-content: center;
    align-items: center;
  }

  .icon-checked1 {
    display: block;
    width: 20px;
    height: 20px;
    border: 20px solid #1890ff;
    border-left: 20px solid transparent;
    border-top: 20px solid transparent;
    border-bottom-right-radius: 10px;
    position: absolute;
    transform: scale(0.8);
    right: -5px;
    bottom: -5px;

    i {
      position: absolute;
      top: -4px;
      left: -4px;
      font-size: 24px;
      color: #fff;
      transform: scale(0.8);
    }
  }

  .sign-item {
    margin-bottom: 20px;
  }
</style>